<template>
  <div class="c-loading-box" v-show="isShowLoading">
    <div class="line" :style="lineStyle"></div>
  </div>
</template>

<script>
  export default {
    data () {
      return {
        isShowLoading: false,
        transitionTime: 0,
        percent: 0,
        lineOpacity: 0.8
      }
    },

    computed: {
      lineStyle () {
        return {
          width: `${this.percent}%`,
          webkitTransition: `width ease ${this.transitionTime}s, opacity ease 0.3s`,
          opacity: this.lineOpacity
        }
      }
    },

    methods: {
      show (str) {
        this._clearTimeout()
        this.percent = 0
        this.transitionTime = 0
        this.isShowLoading = true

        this.showTimeId = setTimeout(() => {
          this.percent = 80
          this.transitionTime = 3
        }, 10)
      },

      hide () {
        this._clearTimeout()
        this.percent = 100
        this.transitionTime = 0.3

        this.hideTimeId = setTimeout(() => {
          this.isShowLoading = false
        }, 600)
      },

      _clearTimeout () {
        window.clearTimeout(this.showTimeId)
        window.clearTimeout(this.hideTimeId)
      }
    }
  }

</script>
<style lang="stylus" scoped>

  .c-loading-box
    width 100%
    position absolute
    top 0
    left 0
    .line
      width 100%
      height 0.06rem
      background green

</style>
